<template>
    <div>
        <div>
            <v-card>
                <v-card-title>
                    <div class="handle-box">
                        <el-input v-model="search" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                        <el-button class="handle-btn" type="primary" @click="addSongs">保存</el-button>
                    </div>
                </v-card-title>
            </v-card>
        </div>
        <div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    sortable
                    label="歌曲名称"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="singer.name"
                    sortable
                    label="歌手名称"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="count"
                    sortable
                    label="风格分类"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    sortable
                    label="时间"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
        </div>
        <div class="text-xs-center pt-2">
            <v-pagination v-model="pagination.page" :length="pagination.totalPage"></v-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: '',
                page: 1,
                tableData: [],
                multipleSelection: [],
                pagination: {
                    rowsPerPage :5,
                    page:1
                },
            }
        },
        created() {
            this.getDataServer()
        },

        methods: {
            getSelectSong(){
                this.id =this.$route.query.id;
                this.$http.get("/songlist/list/song?id="+this.id).then(resp=>{
                    console.log(resp.data)
                    this.tableData.forEach(row=>{
                        resp.data.forEach(sel=>{
                            console.log(row.id+ " "+sel.id)
                            if (row.id === sel.id) {
                                this.$refs.multipleTable.toggleRowSelection(row,true);
                            }
                        })
                    })
                })
            },
            addSongs() {
                const id =this.$route.query.id;

                console.log(this.tableData)
                //获得选中的ids
                const len = this.multipleSelection.length
               /* const ids = []
                for (var i = 0; i < len; i++) {
                    ids[i] = this.multipleSelection[i].id
                }*/

                const sids = this.multipleSelection.map(c=>c.id).join(",")
                //发送添加歌曲的请求
                this.$http.post("/songlist/list/addSong",
                        this.$qs.stringify({
                            id : id,
                            sids: sids
                        })
                ).then(()=>{
                    //保存成功后跳转
                    this.$message.success("保存成功")
                    this.$router.push("/song/AllSongs?id="+id);
                }).catch(()=>{
                    this.$message.error("保存失败")
                })
            },
            getDataServer() {
                this.$http.get("/song/page",{
                    params: {
                        key: this.search,
                        page: this.pagination.page,
                        rows: this.pagination.rowsPerPage,
                        sortBy: this.tableData.sortBy ? this.tableData.sortBy : "",
                        desc: this.tableData.descending ? this.tableData.descending : "true"
                    }
                }).then(resp=>{
                    this.tableData = resp.data.items
                    this.pagination.totalItems = resp.data.total;
                    this.pagination.totalPage = resp.data.totalPage;
                    this.getSelectSong()
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row,true);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }

</script>

<style scoped>
.handle-box{
    width: 70%;
}
    .handle-input{
        width: 40%;
    }
.handle-btn{
    margin-left: 30px;
    width: 100px;
}
</style>